<template>
  <div class="leftMidBox">
    <h4>车辆入场记录</h4>
    <div class="pic">
      <h5>车牌号：{{plate_id}}</h5>
      <img v-bind:src="in_img" alt="" class="carpic" />
      <!-- 下面是图片遮罩，勿动 -->
      <img src="../assets/imgcoverleft.png" alt="" class="cover" />

      <div class="tccname">{{park_name}}</div>
    </div>

    <div class="rtable">
      <ul>
        <li class="tit">
          <span class="name" style="font-size:0.14rem;color:#fff;">车辆入口</span>
          <span class="carnum" style="font-size:0.14rem;color:#fff;">车牌号</span>
          <span class="time" style="font-size:0.14rem;color:#fff;">时间</span>
        </li>
      </ul>
      <ul class="leftMidulCon" style="height:210px;overflow:hidden;">
        <li v-for="(item,index) in tempdata" :key="index">
          <span class="name">{{item.park_name}}{{item.in_passage_name}}</span>
          <span class="carnum">{{item.plate_id}}</span>
          <span class="time">{{item.in_time}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getDetailInRec
} from '../api/api';
export default {
  name: 'leftMid',
  data() {
    return {
      msg: '',
      tempdata: [],
      plate_id: '',
      in_img: '',
      park_name: '',
      in_time: ''

    }
  },
  mounted() {

    this.getDetailInRec();

    setInterval(() => {
      this.getDetailInRec();
    }, 3000);


  },
  methods: {
    getDetailInRec() {
      getDetailInRec().then(res => {
        console.log(res)
        this.tempdata.unshift(res);
        if (this.tempdata.length > 12) {
          this.tempdata.splice(12, 1);
        }
        this.plate_id = this.tempdata[0].plate_id;
        this.in_img = this.tempdata[0].in_img;
        this.in_img = "http://test.bluecardsoft.com.cn/" + this.in_img.slice(20, 60)
        // console.log(this.in_img.slice(20,60))

        this.park_name = this.tempdata[0].park_name;
        this.in_time = this.tempdata[0].in_time;

        $(".leftMidulCon li:first").css({ "height": '0px' })
        $(".leftMidulCon li:first").animate({ height: '+23px' }, "3000")

      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.leftMidBox {
  position: absolute;
  left: 0.47rem;
  top: 3.75rem;
  width: 5rem;
  height: 3.15rem;
  background: url(../assets/left11.png) no-repeat left top;
  color: #ff0;
}

.leftMidBox h4 {
  position: absolute;
  left: 0.3rem;
  top: 0.13rem;
  font-size: 0.18rem;
  color: #18b3f0;
  margin: 0;
  padding: 0;
}

.leftMidBox .pic {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
}

.leftMidBox .pic img.cover {
  position: absolute;
  left: 0.2rem;
  top: 0.5rem;
  z-index: 9;
}

.leftMidBox .pic img.carpic {
  position: absolute;
  left: 0.2rem;
  top: 0.7rem;
  z-index: 1;
  width: 2.3rem;
  height: 1.3rem;
}

.leftMidBox h5 {
  position: absolute;
  left: 0.4rem;
  width: 1.5rem;
  top: 0.52rem;
  z-index: 19;
  font-size: 0.14rem;
  font-weight: normal;
  margin: 0;
  color: #fff;
  text-align: left;
}

.leftMidBox .tccname {
  position: absolute;
  left: 0.2rem;
  top: 2.3rem;
  width: 2.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.16rem;
  color: #a0e9ff;
  background: url(../assets/h5bgleft.png) no-repeat;
}

.leftMidBox .rtable {
  font-size: 12px;
  width: 3rem;
  position: absolute;
  right: -0.25rem;
  top: 0.55rem;
}

.leftMidBox .rtable ul,
.leftMidBox .rtable li {
  margin: 0;
  padding: 0;
}

.leftMidBox .rtable li {
  list-style: none;
}

.leftMidBox .rtable li span {
  display: inline-block;
  border: 1px solid #18b3f0;
}

.leftMidBox .rtable li span.name {
  color: #55d6e9;
  width: 0.9rem;
  height: 0.16rem;
  line-height: 0.16rem;
  overflow: hidden;
}

.leftMidBox .rtable li span.carnum {
  color: #fff;
  width: 0.6rem;
  height: 0.16rem;
  line-height: 0.16rem;
  overflow: hidden;
}

.leftMidBox .rtable li span.time {
  color: #fff;
  width: 0.55rem;
  height: 0.16rem;
  line-height: 0.16rem;
  overflow: hidden;
}
</style>
